
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .grid {
            margin: auto;
            width: 500px;
            text-align: center;
        }
        .grid table {
            width: 100%;
            border-collapse: collapse;
        }
        .grid th,td {
            padding: 10px;
            border: 1px dashed orange;
            height: 35px;
            line-height: 35px;
        }
        .grid th {
            background-color: orange;
        }
        .total{
            height: 30px;
            line-height: 30px;
            background-color: #F3DCAB;
            border-top: 1px solid #C2D89A;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="grid">
        <div>
            <label for="id">编号：</label>
            <input  :disabled="flag" v-model="id" type="text" id="id">
            <label for="name">名称：</label>
            <input v-focus v-model="name" type="text" id="name">
            <button :disabled="subflag" @click="handle">提交</button>
        </div>
        <div class="total">
            <span>图书总数：</span>
            <span>{{total}}</span>
        </div>
        <table>
            <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr :key='item.id' v-for='item in books'>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date|timeFormat('YYYY-MM-DD HH:mm:ss')}}</td>
                <td>
                    <a href="" @click.prevent="toedit(item.id)">修改</a>
                    <span>|</span>
                    <a href="" @click.prevent="delbook(item.id)">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script src="lib/moment.js"></script>
<script type="text/javascript">
    /*
      图书管理-图书列表展示功能
      注意事项：<a href="" @click.prevent>修改</a>
      事件绑定时，可以只添加修饰符，而不绑定事件函数
    */
    var vm = new Vue({
        el: '#app',
        filters:{
            timeFormat(val,arg){
                return moment(val).format(arg)
            }
        },
        directives:{
            focus:{
                inserted(el){
                    el.focus()
                }
            }
        },
        computed:{
            total(){
                return this.books.length
            }
        },
        watch:{
          name(val){
              var flag=this.books.some((item)=>{
                  if (item.name===val){
                      return true
                  }
              })
              if (flag){
                  this.subflag=true
              }else {
                  this.subflag=false
              }
          }
        },
        mounted(){
            var data=[{
                id: 1,
                name: '三国演义',
                date: 1411641720000
            },{
                id: 2,
                name: '水浒传',
                date: 1411641720000
            },{
                id: 3,
                name: '红楼梦',
                date: 1411641720000
            },{
                id: 4,
                name: '西游记',
                date: 1411641720000
            }]
            this.books=data
        },
        data: {
            id:'',
            name:'',
            flag:false,
            subflag:false,
            books: []
        },
        methods:{
            handle (){
                if (!this.flag){
                    // 添加操作
                    var book={}
                    book.id=this.id
                    book.name=this.name
                    book.data=new Date()
                    this.books.push(book)
                }else {
                    // 编辑操作
                    this.books.some((item)=>{
                        if (item.id===this.id){
                            item.name=this.name
                            return true
                        }
                    })
                    this.flag=false
                }
                this.id=''
                this.name=''
            },
            toedit(id){
                this.flag=true
                console.log(id)
                // 根据id查询出要编辑的数据
                var book=this.books.filter((item)=>{
                    // return  item.id===id
                    if(item.id === id){
                        return item.id
                    }
                })
                console.log(book)
                // 把获取到的信息填充到表单
                this.id=book[0].id
                this.name=book[0].name
            },
            delbook(id){
                console.log(id)
                // var index=this.books.findIndex((item)=>{
                //     return item.id===id
                // })
                // console.log(index)
                // this.books.splice(index,1)
                this.books=this.books.filter((item)=>{
                    return item.id!=id
                })
            }
        }
    });
</script>
</body>
</html>
